import { useState, createContext, useContext } from 'react'

const CountContext = createContext(0)

export const day01_13 = function () {
    /* 
        通过ctx.Provider提供数据
        使用useContext获取数据
    */
    const [count, setCount] = useState(0)
    return (
        <>
            <h3>day01_13</h3>
            <div>{count}</div>
            <div>
                <button onClick={() => setCount(count + 1)}>count ++</button>
            </div>
            <CountContext.Provider value={count}>
                <Father />
            </CountContext.Provider>
        </>
    )
}

function Father() {
    return (
        <>
            <h3>Father</h3>
            <Son />
        </>
    )
}

function Son() {
    const count = useContext(CountContext)
    return (
        <>
            <h3>Son</h3>
            <div>{count}</div>
        </>
    )
}
